<template>
  <div>
    <BasicModal
      @register="register"
      :title="title"
      width="600px"
      :destroyOnClose="true"
      :canFullscreen="false"
      :showOkBtn="false"
      :showCancelBtn="false"
    >
      <BasicForm @register="registerForm"> </BasicForm>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { ref } from 'vue';
  import { getUnmounTypeList, updown } from '@/api/hby/productManage';
  import { OPpublishStatus } from '@/enums/productManage';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const title = ref('下架产品');
  const emit = defineEmits(['reload', 'register']);

  const schemas: FormSchema[] = [
    {
      field: 'unmounTypeId',
      component: 'ApiSelect',
      label: '下架原因',
      dynamicDisabled: false,
      required: true,
      componentProps: () => {
        return {
          placeholder: '选择下架原因',
          api: getUnmounTypeList,
          labelField: 'name',
          valueField: 'id',
          showSearch: true,
          filterOption: (input: string, option: any) => {
            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
          },
        };
      },
      colProps: {
        span: 24,
      },
    },
    {
      field: 'explain',
      required:true,
      component: 'InputTextArea',
      label: '补充说明',
      colProps: {
        span: 24,
      },
    },
    {
      field: 'opPublishStatus',
      component: 'Input',
      label: '',
      defaultValue: OPpublishStatus.NotPublished,
      show: false,
    },
    {
      field: 'productIds',
      component: 'CheckboxGroup',
      label: '',
      defaultValue: [],
      show: false,
    },
  ];

  const [registerForm, { updateSchema, validate }] = useForm({
    schemas: schemas,
    autoFocusFirstItem: true,

    actionColOptions: {
      span: 24,
    },
    labelWidth: 140,
    baseColProps: { span: 18 },
    submitButtonOptions: {
      text: '立即下架',
    },
    resetButtonOptions: {
      text: '取消',
    },
    submitFunc: async () => {
      const res = await validate();
      await updown(res);
      createMessage.success('下架成功');
      emit('reload');
      closeModal();
    },
    resetFunc: async function () {
      closeModal();
    },
  });


  const [register, { closeModal }] = useModalInner((data: { ids: number[] }) => {
    updateSchema({
      field: 'productIds',
      component: 'CheckboxGroup',
      label: '',
      defaultValue: data.ids,
      show: false,
    });
  });
</script>

<style lang="less" scoped></style>
